<!-- footer的容器 -->
<template>
  <div class="footer">
    <div class="foot-service">
      <ul class="list-service clearfix">
        <li>
          <a href="#"> <i class="iconfont icon-banshou"></i>预约维修服务 </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-7tianwuliyoutuihuo"></i>7天无理由退货
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-15tianwuliyoutuihuo"></i>15天免费换货
          </a>
        </li>
        <li>
          <a href="#"> <i class="iconfont icon-liwuhuodong"></i>满150元包邮 </a>
        </li>
        <li>
          <a href="#"> <i class="iconfont icon-weizhi"></i>520余家售后网点 </a>
        </li>
      </ul>
    </div>
    <div class="footer-links clearfix">
      <dl class="col-links col-links-first">
        <dt>帮助中心</dt>
        <dd>
          <a href="#">账户管理</a>
        </dd>
        <dd>
          <a href="#">购物指南</a>
        </dd>
        <dd>
          <a href="#">订单操作</a>
        </dd>
      </dl>
      <dl class="col-links">
        <dt>服务支持</dt>
        <dd>
          <a href="#">售后政策</a>
        </dd>
        <dd>
          <a href="#">自助服务</a>
        </dd>
        <dd>
          <a href="#">相关下载</a>
        </dd>
      </dl>
      <dl class="col-links">
        <dt>线下门店</dt>
        <dd>
          <a href="#">小米之家</a>
        </dd>
        <dd>
          <a href="#">服务网点</a>
        </dd>
        <dd>
          <a href="#">授权体验店</a>
        </dd>
      </dl>
      <dl class="col-links">
        <dt>关于小米</dt>
        <dd>
          <a href="#">了解小米</a>
        </dd>
        <dd>
          <a href="#">加入小米</a>
        </dd>
        <dd>
          <a href="#">投资者关系</a>
        </dd>
        <dd>
          <a href="#">企业社会责任</a>
        </dd>
        <dd>
          <a href="#">廉洁举报</a>
        </dd>
      </dl>
      <dl class="col-links">
        <dt>关注我们</dt>
        <dd>
          <a href="#">新浪微博</a>
        </dd>
        <dd>
          <a href="#">官方微信</a>
        </dd>
        <dd>
          <a href="#">联系我们</a>
        </dd>
        <dd>
          <a href="#">公益基金会</a>
        </dd>
      </dl>
      <dl class="col-links">
        <dt>特色服务</dt>
        <dd>
          <a href="#">F 码通道</a>
        </dd>
        <dd>
          <a href="#">礼物码</a>
        </dd>
        <dd>
          <a href="#">防伪查询</a>
        </dd>
      </dl>
      <div class="col-contact">
        <p class="phone">400-100-5678</p>
        <p class="service-time">
          <span>8:00-18:00（仅收市话费）</span>
        </p>
        <a href="" class="search-online">
          <i class="iconfont icon-icon_huabanfuben"></i>
          人工客服
        </a>
        <span class="follewUs">
          <span>关注小米：</span>
          <a href="#"><span class="iconfont icon-weibo1"></span></a>
          <a href="#"
            ><span class="iconfont icon-gongzhonghao"
              ><img
                src="@/assets/img/picture/miWeChat.png"
                alt="小米官微"
                class="miWeChat" /></span
          ></a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang='less' >
.footer {
  background-color: #fff;
  .foot-service {
    margin: 0 auto;
    width: 1226px;

    .list-service {
      margin: 0;
      padding: 27px;
      border-bottom: 1px solid #e0e0e0;

      li {
        width: 19.9%;
        float: left;
        text-align: center;
        height: 25px;
        border-left: 1px solid #e0e0e0;
        font-size: 16px;
        line-height: 25px;

        a {
          color: #616161;
          -webkit-transition: color 0.2s;
          transition: color 0.2s;

          .iconfont {
            margin-right: 6px;
            font-size: 24px;
            line-height: 24px;
            vertical-align: -2px;
          }
          &:hover {
            color: #ff6700;
          }
        }

        &:first-child {
          border-left: 0px;
        }
      }
    }
  }

  .footer-links {
    margin: 0 auto;
    width: 1226px;
    padding: 40px 0;

    .col-links {
      float: left;
      width: 160px;
      height: 112px;
      margin: 0;

      dt {
        margin: -1px 0 26px;
        font-size: 14px;
        line-height: 1.25;
        color: #424242;
      }

      dd {
        margin: 10px 0 0;
        font-size: 12px;

        a {
          color: #757575;

          &:hover {
            color: #ff6700;
          }
        }
      }
    }

    .col-contact {
      float: right;
      width: 251px;
      height: 112px;
      border-left: 1px solid #e0e0e0;
      text-align: center;
      color: #616161;

      .phone {
        margin: 0 0 5px;
        font-size: 22px;
        line-height: 1;
        color: #ff6700;
      }

      .service-time {
        margin: 0 0 16px;
        font-size: 12px;
      }

      .search-online {
        display: inline-block;
        border: 1px solid #ff6700;
        background: #fff;
        color: #ff6700;
        width: 118px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;

        &:hover {
          background: #ff6700;
          color: #ffffff;
        }
      }
      .follewUs {
        display: block;
        .iconfont {
          margin: 0 5px;
        }
        .icon-gongzhonghao {
          position: relative;
          .miWeChat {
            width: 126px;
            display: none;
          }
          &:hover{
            .miWeChat{
              position: absolute;
              display: block;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}
</style>
